<template>
  <div class="p-2">
    <div class="viewBox">
      <!-- 添加或修改实验教学计划对话框 -->
      <el-form ref="teachPlanFormRef" :model="form" :rules="rules" label-width="150px">
        <div class="title-item topTit" ><span class="line-box"></span><span>教学计划</span></div>
        <el-form-item label="计划名称" prop="planName">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.planName" placeholder="请输入计划名称"/>
          <div v-else> {{form.planName}}</div>
        </el-form-item>
        <el-form-item label="学年" prop="planXn">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.planXn" placeholder="请输入学年" />
          <div v-else> {{form.planXn}}</div>
        </el-form-item>
        <div class="title-item"><span class="line-box"></span><span>教学目标</span></div>
        <el-form-item label="知识与技能目标" prop="mbZj">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.mbZj" placeholder="请输入知识与技能目标" />
          <div v-else> {{form.mbZj}}</div>
        </el-form-item>
        <el-form-item label="过程与方法目标" prop="mbGf">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.mbGf" placeholder="请输入过程与方法目标" />
          <div v-else> {{form.mbGf}}</div>
        </el-form-item>
        <el-form-item label="情感态度价值目标" prop="mbQg">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.mbQg" placeholder="请输入情感态度价值目标" />
          <div v-else> {{form.mbQg}}</div>
        </el-form-item>
        <div class="title-item"><span class="line-box"></span><span>教学内容</span></div>
        <el-form-item label="主要知识点" prop="nrZsd">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.nrZsd" placeholder="请输入主要知识点" />
          <div v-else> {{form.nrZsd}}</div>
        </el-form-item>
        <el-form-item label="教学重点和难点" prop="nrJxzd">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.nrJxzd" placeholder="请输入教学重点和难点" />
          <div v-else> {{form.nrJxzd}}</div>
        </el-form-item>
        <el-form-item label="教学内容安排" prop="nrJxap">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.nrJxap" placeholder="请输入教学内容安排" />
          <div v-else> {{form.nrJxzd}}</div>
        </el-form-item>
        <div class="title-item"><span class="line-box"></span><span>教学策略</span></div>
        <el-form-item label="教学方法" prop="clJxff">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.clJxff" placeholder="请输入教学方法" />
          <div v-else> {{form.clJxff}}</div>
        </el-form-item>
        <el-form-item label="学习活动设计" prop="clXxhd">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.clXxhd" placeholder="请输入学习活动设计" />
          <div v-else> {{form.clXxhd}}</div>
        </el-form-item>
        <el-form-item label="课程互动环节" prop="clKchd">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.clKchd" placeholder="请输入课程互动环节" />
          <div v-else> {{form.clKchd}}</div>
        </el-form-item>
        <div class="title-item"><span class="line-box"></span><span>时间安排</span></div>
        <el-form-item label="课时学时设计" prop="sjXs">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.sjXs" placeholder="请输入课时学识" />
          <div v-else> {{form.sjXs}}</div>
        </el-form-item>
        <el-form-item label="各环节时间比例" prop="sjBl">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.sjBl" placeholder="请输入各环节时间比例" />
          <div v-else> {{form.sjBl}}</div>
        </el-form-item>
        <div class="title-item"><span class="line-box"></span><span>评价方式</span></div>
        <el-form-item label="作业安排" prop="pjZyap">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.pjZyap" placeholder="请输入作业安排" />
          <div v-else> {{form.pjZyap}}</div>
        </el-form-item>
        <el-form-item label="考核方式" prop="pjKhfs">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.pjKhfs" placeholder="请输入考核方式" />
          <div v-else> {{form.pjKhfs}}</div>
        </el-form-item>
        <el-form-item label="评价标准" prop="pjPjbz">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.pjPjbz" placeholder="请输入评价标准" />
          <div v-else> {{form.pjPjbz}}</div>
        </el-form-item>
        <div class="title-item"><span class="line-box"></span><span>特殊要求</span></div>
        <el-form-item label="课程特殊要求" prop="tsKcyq">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.tsKcyq" placeholder="请输入课程特殊要求" />
          <div v-else> {{form.tsKcyq}}</div>
        </el-form-item>
        <el-form-item label="教师特殊要求" prop="tsJsyq">
          <el-input type="textarea" :rows="1" v-if="type == 0" v-model="form.tsJsyq" placeholder="请输入教师特殊要求" />
          <div v-else> {{form.tsJsyq}}</div>
        </el-form-item>
      </el-form>

      <div class="dialog-footer" v-if="type == 0">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
      <div class="dialog-footer" v-else>
       
        <el-button @click="goBack">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup name="TeachPlan" lang="ts">
import {
  listTeachPlan,
  getTeachPlan,
  delTeachPlan,
  addTeachPlan,
  updateTeachPlan,
} from "@/api/core/teachPlan";
import { TeachPlanVO, TeachPlanQuery, TeachPlanForm } from "@/api/core/teachPlan/types";
const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const teachPlanList = ref<TeachPlanVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const teachPlanFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: "",
});
const  formId=ref<string | number>();
const type = ref<string | number>();

const initFormData: TeachPlanForm = {
  planName: undefined,
  planXn: undefined,
  mbZj: undefined,
  mbGf: undefined,
  mbQg: undefined,
  nrZsd: undefined,
  nrJxzd: undefined,
  nrJxap: undefined,
  clJxff: undefined,
  clXxhd: undefined,
  clKchd: undefined,
  sjXs: undefined,
  sjBl: undefined,
  pjZyap: undefined,
  pjKhfs: undefined,
  pjPjbz: undefined,
  tsKcyq: undefined,
  tsJsyq: undefined,
};
const data = reactive<PageData<TeachPlanForm, TeachPlanQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    planName: undefined,
    planXn: undefined,
    mbZj: undefined,
    mbGf: undefined,
    mbQg: undefined,
    nrZsd: undefined,
    nrJxzd: undefined,
    nrJxap: undefined,
    clJxff: undefined,
    clXxhd: undefined,
    clKchd: undefined,
    sjXs: undefined,
    sjBl: undefined,
    pjZyap: undefined,
    pjKhfs: undefined,
    pjPjbz: undefined,
    tsKcyq: undefined,
    tsJsyq: undefined,
    params: {},
  },
  rules: {
    planName: [{ required: true, message: "计划名称不能为空", trigger: "blur" }],
    planXn: [{ required: true, message: "学年不能为空", trigger: "blur" }],
    mbZj: [{ required: true, message: "知识与技能目标不能为空", trigger: "blur" }],
    mbGf: [{ required: true, message: "过程与方法目标不能为空", trigger: "blur" }],
    mbQg: [{ required: true, message: "情感态度价值目标不能为空", trigger: "blur" }],
    nrZsd: [{ required: true, message: "主要知识点不能为空", trigger: "blur" }],
    nrJxzd: [{ required: true, message: "教学重点和难点不能为空", trigger: "blur" }],
    nrJxap: [{ required: true, message: "教学内容安排不能为空", trigger: "blur" }],
    clJxff: [{ required: true, message: "教学方法不能为空", trigger: "blur" }],
    clXxhd: [{ required: true, message: "学习活动设计不能为空", trigger: "blur" }],
    clKchd: [{ required: true, message: "课程互动环节不能为空", trigger: "blur" }],
    sjXs: [{ required: true, message: "课时学识不能为空", trigger: "blur" }],
    sjBl: [{ required: true, message: "各环节时间比例不能为空", trigger: "blur" }],
    pjZyap: [{ required: true, message: "作业安排不能为空", trigger: "blur" }],
    pjKhfs: [{ required: true, message: "考核方式不能为空", trigger: "blur" }],
    pjPjbz: [{ required: true, message: "评价标准不能为空", trigger: "blur" }],
    tsKcyq: [{ required: true, message: "课程特殊要求不能为空", trigger: "blur" }],
    tsJsyq: [{ required: true, message: "教师特殊要求不能为空", trigger: "blur" }],
  },
});

const { queryParams, form, rules } = toRefs(data);

/** 返回按钮 */
const goBack = () => {
  reset();
  proxy?.$router.go(-1);
};
/** 取消按钮 */
const cancel = () => {
  reset();
  proxy?.$router.go(-1);
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  teachPlanFormRef.value?.resetFields();
};




/** 提交按钮 */
const submitForm = () => {
  teachPlanFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (formId.value) {
        await updateTeachPlan(form.value).finally(() => (buttonLoading.value = false));
        proxy?.$modal.msgSuccess("编辑成功");
      } else {
        await addTeachPlan(form.value).finally(() => (buttonLoading.value = false));
        proxy?.$modal.msgSuccess("新增成功");
      }
      proxy?.$router.go(-1);
    }
  });
};




/** 获取数据 */
(async () => {
    formId.value = route.query && (route.query.id as string);
    type.value=route.query && (route.query.type as string);
  if (formId.value) {
    const res = await getTeachPlan(formId.value);
    Object.assign(form.value, res.data);
  }
})();
</script>
<style lang="scss" scoped>
.viewBox {
 margin: 15px  15px 80px 15px;
  .title-item {
    display: flex;
    align-items: center;
    height: 24px;
    line-height: 24px;
    font-size: 20px;
    margin: 30px 0 20px;
    span {
      display: inline-block;
      margin: 0 5px;
    }
    .line-box {
      width: 4px;
      height: 24px;
      background: #05afea;
    }
  }
  .topTit{
    margin-top: 10px;
  }
  .el-form-item--default{
    margin: 15px 30px;
  }
  ::v-deep .el-textarea__inner {
  width: 300px !important;
}
.dialog-footer{
  margin-top:40px;
text-align: center;

}
}
</style>
